<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item label="类型">
          <el-select v-model="filterFrom.type">
            <el-option label="全部视频" value=""></el-option>
            <el-option label="课时视频" value="1"></el-option>
            <el-option label="活动视频" value="2"></el-option>
            <el-option label="其它视频" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="filterFrom.source">
            <el-option label="全部" value=""></el-option>
            <el-option label="网易视频云" value="1"></el-option>
            <el-option label="第三方视频网站" value="2"></el-option>
            <el-option label="系统内部" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否公开">
          <el-select v-model="filterFrom.public">
            <el-option label="不限" value=""></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
        <div class="pull-right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </div>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column type="expand">
          <template scope="props">
            <img v-if="props.row.snapshot_url" v-bind:src="props.row.snapshot_url" style="float: left;max-width:100px;height:75px;" />
            <div style="float: left;margin-left: 10px;width: calc(100% - 150px);">
              <dl class="dl-horizontal">
                <dt>内部ID：</dt>
                <dd>{{props.row.id}}</dd>
                <dt>地址：</dt>
                <dd>
                  <el-button type="success" size="mini" @click="handldPlay(props.row)">点击播放</el-button>
                </dd>
                <dt>时间：</dt>
                <dd>{{props.row.create_time}}</dd>
                <dt>介绍：</dt>
                <dd>{{props.row.introduction}}</dd>
                <dt>视频云ID：</dt>
                <dd>{{props.row.net_vid}}</dd>
              </dl>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="uid" label="用户ID" width="100"></el-table-column>
        <el-table-column :formatter="disableFormatter" label="禁止播放" width="100"></el-table-column>
        <el-table-column :formatter="publicFormatter" label="免费公开" width="100"></el-table-column>
        <el-table-column :formatter="inFirstFormatter" label="首页推荐" width="100"></el-table-column>
        <el-table-column :formatter="sourceFormatter" label="视频来源" width="100"></el-table-column>
        <el-table-column :formatter="typeFormatter" label="类型" width="120"></el-table-column>
        <el-table-column prop="view_count" label="浏览量" width="80"></el-table-column>
        <el-table-column label="操作" width="200">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handleSetting(scope.row)">设置</el-button>
            <el-button v-if="scope.row.uid === 0" size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.uid === 0" size="small" type="primary" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.page_number" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.page_size" layout="sizes, prev, pager, next, jumper,total"
          :total="totalSize" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="视频编辑" v-model="showDialog" :close-on-click-modal="false">
      <el-form :model="curObject" label-width="110px">
        <el-row :gutter="10">
        <el-col :span="13">
        <el-form-item label="标题">
          <el-input v-model="curObject.title"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select style="width: 100%" v-model="curObject.type">
            <el-option label="课时视频" v-bind:value="1"></el-option>
            <el-option label="活动视频" v-bind:value="2"></el-option>
            <el-option label="其它视频" v-bind:value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频来源">
          <el-select style="width: 100%" v-model="curObject.source">
            <el-option label="网易视频云" v-bind:value="1"></el-option>
            <el-option label="第三方视频网站" v-bind:value="2"></el-option>
            <el-option label="系统内部" v-bind:value="0"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="免费公开">
          <el-select style="width: 100%" v-model="curObject.public">
            <el-option label="是" v-bind:value="1"></el-option>
            <el-option label="否" v-bind:value="0"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="11">
          <img v-if="curObject.snapshot_url" v-bind:src="curObject.snapshot_url" style="width: 100%;max-height: 210px;">
        </el-col>
        </el-row>
        <el-row :gutter="12">
        <el-col :span="13">
        <el-form-item label="网易云视频ID">
          <el-input v-model="curObject.net_vid"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-button type="info" @click="checkVideo">验 证</el-button>
          <a href="http://app.netease.im/index#/app/vod/3187743" target="_blank">上 传</a>
        </el-col>
        </el-row>
        <el-form-item label="截图">
          <el-input v-model="curObject.snapshot_url"></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="curObject.url"></el-input>
        </el-form-item>
        <el-form-item label="视频介绍">
          <el-input type="textarea" v-bind:rows="5" v-model="curObject.introduction"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click.stop="handldSave">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="视频播放" v-model="showPlayerDialog" :close-on-click-modal='false' @close="stopPlayVideo">
      <video ref="player" style="width: 100%;height: 100%" controls="controls" autoplay="autoplay">
        浏览器不支持播放
        <source type="video/mp4" v-bind:src="palyVideoUrl"/>
      </video>
    </el-dialog>
    <el-dialog title="视频设置" v-model="showSettingDialog" size="tiny" :close-on-click-modal="false">
      <el-form :model="curObject" label-width="110px">
        <el-form-item label="首页推荐">
          <el-select style="width: 100%" v-model="curObject.in_first">
            <el-option label="是" v-bind:value="1"></el-option>
            <el-option label="否" v-bind:value="0"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="禁止播放">
          <el-select style="width: 100%" v-model="curObject.disable">
            <el-option label="是" v-bind:value="1"></el-option>
            <el-option label="否" v-bind:value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showSettingDialog = false">取 消</el-button>
        <el-button type="primary" @click.stop="handldSaveSetting">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../api'
  import utils from '../../utils'

  var filterFrom = {
    page_number: 1,
    page_size: 10,
    type: '',
    public: '',
    source: ''
  }

  export default {
    data: function () {
      return {
        showPlayerDialog: false,
        showSettingDialog: false,
        palyVideoUrl: '',
        showDialog: false,
        curObject: {},
        isLoading: false,
        tableData: [],
        filterFrom,
        totalSize: 0
      }
    },
    created: function () {
      this.fetchData()
    },

    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.page_size = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.page_number = val
        this.fetchData()
      },
      handleEdit: function (selectData) {
        this.curObject = utils.object.deepClone(selectData)
        this.showDialog = true
      },
      handleAdd: function () {
        this.curObject = {
          title: '',
          printscreen_url: '',
          net_vid: '',
          source: '',
          public: '',
          type: '',
          url: '',
          introduction: ''
        }
        this.showDialog = true
      },
      handldSave: function () {
        API.videoSave(this.curObject,
          (data) => {
            if (!data) return
            this.fetchData()
            this.showDialog = false
          }
        )
      },
      handleDelete: function (selectData) {
        this.$confirm('你将删除该视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params = {
            'id': selectData.id
          }
          API.videoDelete(params, (data) => {
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSetting: function (selectData) {
        this.curObject = utils.object.deepClone(selectData)
        this.showSettingDialog = true
      },
      handldSaveSetting: function () {
        API.videoSaveSetting(this.curObject,
          (data) => {
            if (!data) return
            this.fetchData()
            this.showSettingDialog = false
          }
        )
      },
      checkVideo: function () {
        API.videoNetDetail({net_vid: this.curObject.net_vid}, (data) => {
          if (!data) return
          this.curObject.snapshot_url = data.snapshotUrl
          this.curObject.url = data.origUrl
          this.$message({
            message: '视频ID正确',
            type: 'success'
          })
        })
      },
      handldPlay: function (curObject) {
        if (curObject.type === 2) {
          window.open(curObject.url)
          return
        }
        API.videoDetail({id: curObject.id}, (data) => {
          if (!data || !data.url) return
          this.palyVideoUrl = data.url
          this.startPlayVideo()
        })
        this.showPlayerDialog = true
      },
      stopPlayVideo: function () {
        this.$refs.player.pause()
        this.palyVideoUrl = ''
      },
      startPlayVideo: function () {
        if (this.$refs.player) {
          this.$refs.player.load()
          this.$refs.player.play()
        }
      },
      fetchData: function () {
        this.isLoading = true
        API.videoList(this.filterFrom, (data) => {
          if (!data) return
          this.isLoading = false
          this.tableData = data.list
          this.totalSize = data.total_size
        })
      },
      disableFormatter: function (row) {
        return row.disable === 1 ? '是' : '否'
      },
      inFirstFormatter: function (row) {
        return row.in_first === 1 ? '是' : '否'
      },
      publicFormatter: function (row) {
        return row.public === 1 ? '是' : '否'
      },
      sourceFormatter: function (row) {
        switch (row.source) {
          case 0: return '系统内部'
          case 1: return '视频云'
          case 2: return '第三方'
          default: return ''
        }
      },
      typeFormatter: function (row) {
        switch (row.type) {
          case 0: return '其它视频'
          case 1: return '课时视频'
          case 2: return '活动视频'
          default: return ''
        }
      }
    }
  }
</script>

<style scoped>
  dd {
    width: 600px;
    word-wrap: break-word
  }
</style>
